<template>
    <div  style="display: flex;" v-loading="loading">
        <div style="height: calc(100vh - 94px);width: 290px;border-right: 1px solid #f4f5f9;background: #F4F9FF;">
            <el-input
                v-model="query.search_value"
                placeholder="请输入关键词"
                class="input-with-select bj_color_fff"
                @input="list"
                >
            </el-input>
            <div class="fansStyle" ref="box">
                <div v-for="(item,index) in fansList" :key="index" @click="getFans(item.im_user_id)">
                    <img :src="item.avatar_url" style="width: 40px;height: 40px;border-radius: 5px;border: 1px solid #eee;" alt="">
                    <span class="ml-2" style="text-align: left;">
                        <div style="font-family: PingFangSC, PingFang SC;font-weight: 500;font-size: 14px;color: #222222;line-height: 20px;">{{item.nickname}}</div>
                        <div style="font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 12px;color: #999999;line-height: 17px;">ID：{{item.member_id}}</div>
                    </span>
                </div>
                <div v-if="count>=20&&isList" class="Grid Grid--justifyCenter" style="color: #999999;padding-bottom: 0;">暂无更多数据</div>
            </div>
        </div>
        <iframe style="height: calc(100vh - 94px);width: calc(100% - 290px);font-size: 12px;" :src="session" frameborder="0"></iframe>
    </div>
</template>
<script>
import { useUserStoreHook } from '@/store/modules/user'
import {list} from '@/api/member/member'
export default {
    data () {
        return {
            isList: false,
            messageUrl: '',//消息列表
            session: '',//会话窗口
            fansList: [],//粉丝列表
            loading: true,
            count: 0,
            query: {
                page: 1,
                limit: 20,
                search_value: '',
                search_field: 'nickname',
                search_exp: 'like',
            },
        }
    },
    created () {
        this.getFans(this.$route.query.im_user_id)
        // if (this.$route.query.im_user_id) {
        //     this.getFans(item)
        // }
        this.list()
    },
    mounted () {
        this.$refs.box.addEventListener('scroll', this.lazyLoading) // 滚动到底部，再加载的处理事件
    },
    methods: {
        // 点击
        getFans (item) {
            console.log(item, 'item')
            const userStore = useUserStoreHook()
            console.log(import.meta.env, 'import.meta.env.')
            let url = import.meta.env.VITE_USER_NODE_ENV=='prod'?window.location.origin:import.meta.env.VITE_APP_BASE_URL
            this.session = url+`/chattool/#/?SDKAppID=${userStore.user.im_list.im_sdk_appid}&userID=${userStore.user.im_list.im_user_id}&userSig=${userStore.user.im_list.im_usersig}&nickName=${item}`
            setTimeout(() => {
                        this.loading = false
            }, 1000);
        },
        // 列表
        list() {
            list(this.query)
                .then((res) => {
                    this.fansList = this.fansList.concat(res.data.list)
                    // this.fansList = res.data.list
                    if (this.count==0) {
                        this.count = res.data.count
                    }
                    if(this.query.page*this.query.limit>= this.count) {
                        this.isList = true
                        window.removeEventListener('scroll', this.lazyLoading);
                    }
                })
                .catch(() => {
            })
        },
        // 滚动加载
        lazyLoading (e) {
            if (this.isList) return
            const scrollTop = e.target.scrollTop // 滚动条滚动时，距离顶部的距离
            const windowHeight = e.target.clientHeight // 可视区的高度
            const scrollHeight = e.target.scrollHeight // 滚动条的总高度
            // 滚动条到底部
            //当滚动过的距离+可视区的高度>=滚动条长度时，就相当于滚动到了底部
            if (scrollTop + windowHeight === scrollHeight) {
                this.query.page++
                //if (this.page > this.page_count) return
                this.list()
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.input-with-select{
    padding: 10px;
}
.fansStyle{
    height: calc(100% - 60px);
    overflow: auto;
    padding-bottom: 10px;
    &>div{
        display: flex;
        justify-items: center;
        align-items: center;
        padding: 10px;
        cursor: pointer;
    }
    &>div:hover{
        background: #E4EDF7;
    }
}
::v-deep .input-with-select{
    padding: 12px 18px 16px;
    .el-input__wrapper{
        box-shadow: none;
    }
}
/* 自定义整个滚动条 */
.fansStyle::-webkit-scrollbar {
  width: 4px; /* 设置滚动条的宽度 */
}
.fansStyle::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 4px solid transparent;
  background-color: #d2d2d2;
}
</style>